import Taro from '@tarojs/taro'
import React, { useCallback } from 'react';
import { View } from '@tarojs/components'
import ModuleTitle from '@COMPONENTS/ModuleTitle'
import UserAvatar from '@COMPONENTS/User/UserAvatar'
import UserName from '@COMPONENTS/User/UserName'
import UserDesc from '@COMPONENTS/User/UserDesc'
import Navigate from '@NAVIGATION/navigateManager'
import i18n from '@I18N'
import { Analytic_Type } from '@CONSTANTS/analytic'
import style from './DoctorCarousel.module.scss'

const MAX_LENGTH = 3

const DoctorCarousel = ({
  dataList, language, tIds, pageTitle
}) => {
  const hasMore = Array.isArray(dataList) && dataList.length > MAX_LENGTH
  const onClickMore = useCallback(
    () => {
      Navigate.recommendDoctorList({ tIds: encodeURIComponent(JSON.stringify(tIds)), pageTitle: encodeURIComponent(pageTitle) })
    },
    [tIds, pageTitle],
  )

  if (!dataList || dataList?.length === 0) {
    return null
  }

  return (
    <View className={style.container}>
      <ModuleTitle
        title={i18n.doctor.consul_doctor()}
        showMore={hasMore}
        onClickMore={onClickMore}
      />
      <View className={style.content}>
        {Array.isArray(dataList) && dataList.slice(0, 3).map((item, index) => (
          <DoctorCard pageTitle={pageTitle} data={item} index={index} language={language} key={item?.p8Id} />
        ))}
      </View>
    </View>
  )
}

export const DoctorCard = ({ data, language, pageTitle = '' }) => {
  const { p8Id: pId } = data
  const onClickCard = useCallback(
    () => {
      Navigate.doctorDetail({ pId })
      Taro.tracker.trackEvent(Analytic_Type.tap_decision_recmd_doc.eventId, { title: pageTitle })
    },
    [pId, pageTitle],
  )

  return (
    <View className={style.itemContainer} onClick={onClickCard}>
      <UserAvatar data={data} />
      <View className={style.itemRight}>
        <UserName data={data} language={language} />
        <UserDesc data={data} language={language} oneLine />
      </View>
    </View>
  )
}

export default DoctorCarousel
